<template>
  <div class="managementWork">
    <div class="com-top-nav">
      <van-nav-bar
        title="管理作品"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="container">
      <div class="work-container">
        <zx-manage-work title="作品名称" :del="true" @clickDel="handleDelWork"></zx-manage-work>
        <div class="button">
          <van-button size="large" @click="addWork">添加作品</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import zxManageWork from '../../../components/zx-manage-work';

  export default {
    name: 'managementWork',
    components: {
      zxManageWork
    },
    data(){
      return {
        value: 50,
      }
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      addWork() {
        this.$router.push({name: 'addTheWork'})
      },
      handleDelWork() {
        this.$dialog.confirm({
          title: '删除',
          message: '是否删除该作品'
        }).then(() => {
          // on confirm
          console.log(123);
        }).catch(() => {
          // on cancel
        });
      }
    }
  }
</script>

<style scoped lang="less" type="text/less">
  @import url('../../../../static/style/var');

  .button {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 30px;
  }

  .container {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #ffffff;
    .work-container {

    }
  }

</style>
